<template>
  <div v-loading="loading" element-loading-text="正在交卷中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="height: 100%">
    <div style="width: 100%;height: 50px;background-color: #8c939d;display: flex;justify-content: flex-end;align-items: center;padding: 10px">
      <div class="flex-container">
        <i class="el-icon-arrow-left" style="cursor: pointer;" @click="goBack"></i>
        <!-- 其他内容 -->
      </div>
    </div>

    <el-form :model="testGroup" label-width="100px" class="demo-ruleForm" style="margin-top: 10px">
      <el-form-item  v-for="(item,index) in testGroup.选择题" :key="index">
        <el-form-item :label="'选择题 ' + (index + 1)">
          <el-input  disabled="" v-model="item.question" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item :label="'你的答案'" v-if="!isSubmit">
          <el-input placeholder="请输入选项" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>

        <el-form-item :label="'答案正确'" v-if="isSubmit && item.useranswer===item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>
        <el-form-item :label="'答案错误'" v-else-if="isSubmit && item.useranswer!==item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>
        <el-form-item :label="'正确答案'" v-if="isSubmit && item.useranswer!==item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.answer"></el-input>
        </el-form-item>

      </el-form-item>

      <el-form-item  v-for="(item,index) in testGroup.填空题" :key="index">
        <el-form-item :label="'填空题 ' + (index + 1)">
          <el-input  disabled="" v-model="item.question" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item :label="'你的答案'" v-if="!isSubmit">
          <el-input placeholder="请输入选项" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>

        <el-form-item :label="'答案正确'" v-if="isSubmit && item.useranswer===item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>
        <el-form-item :label="'答案错误'" v-else-if="isSubmit && item.useranswer!==item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>
        <el-form-item :label="'正确答案'" v-if="isSubmit && item.useranswer!==item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.answer"></el-input>
        </el-form-item>

      </el-form-item>

      <el-form-item  v-for="(item,index) in testGroup.解答题" :key="index">
        <el-form-item :label="'解答题 ' + (index + 1)">
          <el-input  disabled="" v-model="item.question" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item :label="'你的答案'" v-if="!isSubmit">
          <el-input placeholder="请输入选项" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>

        <el-form-item :label="'答案正确'" v-if="isSubmit && item.useranswer===item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>
        <el-form-item :label="'答案错误'" v-else-if="isSubmit && item.useranswer!==item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.useranswer"></el-input>
        </el-form-item>
        <el-form-item :label="'正确答案'" v-if="isSubmit && item.useranswer!==item.answer">
          <el-input disabled="" style="width: 10%" v-model="item.answer"></el-input>
        </el-form-item>

      </el-form-item>

      <el-form-item>
        <el-button style="margin-left: 30px" v-if="!isSubmit" type="primary" @click="submit">交卷</el-button>
        <el-button v-else style="margin-left: 30px" type="primary" @click="reset">重做</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: "Content",
  data(){
    return{
      testGroup:{},
      loading:false,
      isSubmit:false,
      centerDialogVisible: false
    }
  },
  methods:{
    getContent(){
      console.log(this.$route.query.testid)
      this.$request.post('/test/question/all',{testid:this.$route.query.testid}).then(res=>{
        if(res.code === '200'){
          this.testGroup=res.data
          this.$message.success('加载成功')
          this.isSubmitted()
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    goBack(){
      this.$router.back();
    },
    submit(){
      this.$confirm('确认交卷？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            // 用户点击确定按钮
            console.log('用户点击了确定');
            this.loading=true
            this.$request.post('/test/answer/all',[...this.testGroup.选择题,...this.testGroup.填空题,...this.testGroup.解答题]).then(res=>{
              if(res.code === '200'){
                console.log(res.data)
                this.$message.success('交卷成功')
              }else{
                this.$message.error(res.msg)
              }
              this.loading=false
              this.isSubmit=true
            })
            // 执行关闭操作
            done();
          })
          .catch(() => {
            // 用户点击取消按钮
            console.log('用户点击了取消');
          });

    },
    isSubmitted(){
      console.log(this.testGroup.选择题[0].correct)
      if(this.testGroup.选择题.length!==0){
        if(this.testGroup.选择题[0].correct!==null){
          this.isSubmit=true
          return
        }
      }
      if(this.testGroup.填空题.length!==0){
        if(this.testGroup.填空题[0].correct!==null){
          this.isSubmit=true
          return
        }
      }
      if(this.testGroup.解答题.length!==0){
        if(this.testGroup.解答题[0].correct!==null){
          this.isSubmit=true
        }
      }
    },
    reset(){
      this.$confirm('确认重做？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            // 用户点击确定按钮
            console.log('用户点击了确定');
            this.$request.post('/test/test/reset',{testid:this.$route.query.testid}).then(res=>{
              if(res.code === '200'){
                console.log(res.data)
                this.$message.success('重做成功')
                this.testGroup=res.data
                this.isSubmit=false
              }else{
                this.$message.error(res.msg)
              }
              this.loading=false
            })
            // 执行关闭操作
            done();
          })
          .catch(() => {
            // 用户点击取消按钮
            console.log('用户点击了取消');
            // 这里可以执行一些取消操作的逻辑，或者什么都不做
          });
    }
  },
  mounted() {
    this.getContent()
  }
}
</script>

<style scoped>
.flex-container {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
}
.el-icon-arrow-left:hover{
  opacity: 0.5;
}
</style>